<template>
	<view class="content">
		<view class='header'>
			<pagehead :title="title" :titlecolor='titlecolor' :isback='isback'></pagehead>
		</view>
		<view class='topblock'>
			<view class='time'>今天08月22日</view>
			<view class='topinfo'>
				<view class='infobox'>
					<view class='tip'>收入</view>
					<view class='price'><text class='icon'>￥</text>63552.32</view>
				</view>
				<view class='infobox'>
					<view class='tip'>支出</view>
					<view class='price'><text class='icon'>￥</text>63552.32</view>
				</view>
			</view>
		</view>
		<view class='bottomblock'>
			<view class='title'>收入</view>
			<view class='blockcontent'>
				<view class='blockleft'>
					<view class='circle'>
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" :tooltipShow='tooltipShow' />
					</view>
				</view>
				<view class='blockright'>
					<view class='linetitles'>
						<view class='linetitle'>类别</view>
						<view class='linetitle'>占比</view>
						<view class='linetitle'>金额</view>
					</view>
					<view class='linecontent'>
						<view class='line lineone'>
							<view class='icon'></view>
							<view class='linetext'>黄皮纸箱</view>
						</view>
						<view class='line linetwo'>
							<view class='linetext'>11%</view>
						</view>
						<view class='line linetwo'>
							<view class='linetext'>11%</view>
						</view>
					</view>
					<view class='linecontent'>
						<view class='line lineone'>
							<view class='icon'></view>
							<view class='linetext'>黄皮纸箱</view>
						</view>
						<view class='line linetwo'>
							<view class='linetext'>11%</view>
						</view>
						<view class='line linetwo'>
							<view class='linetext'>11%</view>
						</view>
					</view>
					<view class='linecontent'>
						<view class='line lineone'>
							<view class='icon smallcircle'></view>
							<view class='linetext'>黄皮纸箱</view>
						</view>
						<view class='line linetwo'>
							<view class='linetext'>11%</view>
						</view>
						<view class='line linetwo'>
							<view class='linetext'>11%</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='bottomblock'>
			<view class='title'>支出</view>
			<view class='blockcontent'>
				<view class='blockleft'>
					<view class='circle'>
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" :tooltipShow='tooltipShow' />
					</view>
					
				</view>
				<view class='blockright'>
					<view class='linetitles'>
						<view class='linetitle'>类别</view>
						<view class='linetitle'>占比</view>
						<view class='linetitle'>金额</view>
					</view>
					<view class='linecontent'>
						<view class='line lineone'>
							<view class='icon'></view>
							<view class='linetext'>黄皮纸箱</view>
						</view>
						<view class='line linetwo'>
							<view class='linetext'>11%</view>
						</view>
						<view class='line linetwo'>
							<view class='linetext'>11%</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面标题
				title: '今日收支明细',
				titlecolor: 'white',
				isback: true,
				// 饼状图
				tooltipShow:false,
				chartData: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					
					// width:uni.upx2px(160)+'px',
					// height:uni.upx2px(160)+'px',
					
					dataLabel: false,
					dataPointShape:false,
					dataPointShapeType:'hollow',
					
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: uni.upx2px(20),
							activeOpacity: 0,
							activeRadius: 0,
							offsetAngle: 0,
							labelWidth: 0,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "一班",
								"value": 50
							}, {
								"name": "二班",
								"value": 30
							}, {
								"name": "三班",
								"value": 20
							}, {
								"name": "四班",
								"value": 18
							}, {
								"name": "五班",
								"value": 8
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		
	}
	}
</script>

<style lang='less' scoped>
	.content {
		background-color:#F2F2F2;
		min-height: 100vh;
		.header {
			position: fixed;
			left: 0rpx;
			top: 0rpx;
		}

		.topblock {
			width: 100%;
			background-color: #2F70F1;
			box-sizing: border-box;
			padding: 20rpx 32rpx;
			padding-bottom: 40rpx;
			.time {
				font-size: 42rpx;
				color: #fff;
				margin-top: 100rpx;
			}

			.topinfo {
				display: flex;
				justify-content: space-between;
				width: 80%;
				margin: 0px auto;
				margin-top: 50rpx;

				.infobox {
					text-align: center;
					;

					.tip {
						color: #fff;
						font-size: 24rpx;
					}

					.price {
						color: #fff;
						font-size: 42rpx;
						margin-top: 29rpx;
					}

					.icon {
						font-size: 24rpx;
					}
				}
			}
		}
		.bottomblock {
			.title {
				color: #474747;
				font-size: 30rpx;
				margin-left: 31rpx;
				margin-top: 40rpx;
			}

			.blockcontent {
				width: 686rpx;
				margin: 0px auto;
				margin-top: 40rpx;
				border-radius: 30rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding:45rpx 30rpx;
				display: flex;
				.blockleft {
					.circle {
						width: 160rpx;
						height: 160rpx;
					}
				}
				.blockright{
					margin-left:53rpx;
					flex-grow: 1;
					.linetitles{
						display: flex;
						font-size: 26rpx;
						color:#474747;
						.linetitle:nth-child(1){
							width:50%
						}
						.linetitle:nth-child(2){
							width:25%
						}
						.linetitle:nth-child(3){
							width:25%
						}
					
					}
					.linecontent{
						display: flex;
						color:#474747;
						font-size:22rpx;
						margin-top:27rpx;
						.line:nth-child(1){
							width:50%
						}
						.line:nth-child(2){
							width:25%
						}
						.line:nth-child(3){
							width:25%
						}
						.lineone{
							display: flex;
							.icon{
								width:12rpx;
								height:12rpx;
								background-color:#FF3A79;
								margin-top:10rpx;
							}
							.smallcircle{
								background-color:#444444;
								border-radius: 50%;
							}
							.linetext{
								margin-left:20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
